<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="/static/common/semidata/seajs/seajs/2.2.1/sea.js" id="seajsnode"></script>
    <script src="/static/common/semidata/config.js"></script>
	<style type="text/css">
	    * { padding:0; margin:0;}
	    #semiSlide li{ position:absolute; left:0; top:0; z-index:1; position:absolute; z-index:1; background:#fafafa;}
	    #semiSlide .page{ position:absolute; bottom:10px; right:10px; z-index:2;}
	    #semiSlide .page a{ width:22px; height:22px; background:#999; border-radius:100%; color:#fff; text-align:center; font-size:10px; line-height:22px; margin:0 1px; cursor:default; display:inline-block; *display:inline; *zoom:1;}
	    #semiSlide .page .current,#semiSlide .page a:hover{ background:#E4393C;}
	</style>
	<script>
		seajs.use(['jquery','holder'], function($, $holder){
			var colorArr = [],timer, 
				params = semi.utils.getUrlParam(),
				w = params.width,
				h = params.height,
				num = params.num, 
				showtype = params.showtype, 
				time = params.time, 
				arraytype = params.arraytype,
				customtmpl = decodeURIComponent(params.customtmpl),
				key = decodeURIComponent(params.key),
				current = 0;
			
			while(colorArr.length<num){
				colorArr.pushOnly(semi.utils.getRandomColor());
			}
			
			var init = function(){
				
				if(showtype == 1){
					var _tmpl = '', _page = '', _slideTmpl = ['<div id="semiSlide" style="width:'+w+'px;height:'+h+'px;overflow:hidden;position:relative;"><ul style="width:'+w+'px;height:'+h+'px;overflow:hidden;position:relative;">{{ lis }}</ul><div class="page">{{ pages }}</div></div>'].join('');
					for(var i=0; i<num; i++){
						_tmpl += '<li><img data-src="holder.js/'+w+'x'+h+'/'+colorArr[i]+':#fff" alt="广告位预览"></li>';
						_page += ('<a>'+(i+1)+'</a>');
					}
					_tmpl = _slideTmpl.replace('{{ lis }}', _tmpl).replace('{{ pages }}', _page);
					$('body').append(_tmpl);
					
					if($('#semiSlide ul').width()<(24*num) && $('#semiSlide ul').height()>(24*num)){
						$('#semiSlide .page').css({'width':'22px'});
						$('#semiSlide .page a').css({'margin':'1px 0'});
					}
					$('#semiSlide a').on({
						mouseenter: function(){
							var index = $(this).index();
							clearInterval(timer);
							slideTo(index);
						},
						mouseleave: initTimer
					});
					initTimer();
					slideTo(0);
					current = 1;
				}else if(showtype == 2){
					var _w = w; _h = h, _tmpl = '';
					if(arraytype == 0){
						_w = Math.floor(w/num);
					}else{
						_h = Math.floor(h/num);
					}
					for(var i=0; i<num; i++){
						_tmpl += '<img data-src="holder.js/'+_w+'x'+_h+'/'+colorArr[i]+':#fff" alt="广告位预览">';
					}
					$('body').append(_tmpl);
				}else if(showtype == 3){
					$('body').append(customtmpl);
					$('['+key+']').each(function(){
						$(this).attr('src','/static/trp/images/material.jpg');
					});
				}else{
					$('body').append('<img data-src="holder.js/'+w+'x'+h+'/'+colorArr[0]+':#fff" alt="广告位预览">');
				}
				$holder.run();
			}
			var slideTo = function(index){
				$('#semiSlide a:eq('+index+')').addClass('current').siblings().removeClass('current');
				$('#semiSlide li:visible').css('z-index','-1');
				$('#semiSlide li:eq('+index+')').css('z-index','1');
			}
			var initTimer = function(){
				timer = setInterval(function(){
					slideTo(current);
					current<num-1?current++:current=0;
				}, time);
			}
			setTimeout(init,10);
		});
	</script>
</head>
<body></body>
</html>
